<template>
  <div :class="cellClass" @click="onClick">
    <slot name="icon">

    </slot>
    <div :class="['my-cell__title', titleClass]" v-if="showTitle">
      <slot name="title">
        <span>{{title}}</span>
      </slot>
      <slot name="label">
        <div :class="['my-cell__label', labelClass]">
          {{label}}
        </div>
      </slot>
    </div>
    <div
      :class="['my-cell__value', !title && 'my-cell__value--alone']"
      v-if="showValue">
      <slot><span>{{value}}</span></slot>
    </div>
    <slot name="right-icon">

    </slot>
  </div>
</template>

<script>
export default {
  name: 'my-cell',
  props: {
    icon: String,
    size: String, // 可选值large
    center: {
      type: Boolean,
      default: false
    },
    isLink: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    titleClass: String,
    valueClass: String,
    labelClass: String,
    title: [String, Number],
    value: [String, Number],
    label: [String, Number],
    border: {
      type: Boolean,
      default: true
    },
    arrowDirection: String // 可选值left up down
  },

  computed: {
    cellClass() {
      let {size, center, isLink, required, border} = this
      let classes = [
        'my-cell',
        {'my-cell--center': center},
        {'my-cell--required': required},
        {'my-cell--borderless': !border},
        size && `my-cell-${size}`
      ]
      return classes
    },

    showTitle() {
      return this.$slots.title
        || typeof this.title !== 'undefined'
        || this.$slots.label
        || typeof this.label !== 'undefined'
    },

    showValue() {
      return this.$slots.default || typeof this.value !== 'undefined'
    }
  },

  methods: {
    onClick(event) {
      this.$emit('click', event)
    }
  }
}
</script>

<style lang="less">
  @import './cell.less';
</style>
